<template>
    <div class="app-container">
      <el-card class="box-card base-info-card">
        <div class="header" slot="header">
          <div class="header-text"><span class="header-icon header-icon-profile"></span>基本资料</div>
          <el-button class="edit-btn" type="text" v-if="!isEditing" @click="handleEditing"><i class="el-icon-edit"></i> 编辑</el-button>
        </div>
        <el-form class="base-info-form" ref="form" label-width="140px" size="mini">
          <div class="base-info">
            <div class="info-left">
              <el-upload class="info-img" :action="avatarAction" :headers="uploadHeaders" :show-file-list="false" :on-success="handleUploadAvatar" :disabled="!isEditing">
                <img class="info-img-show" :src="form.userAvatar||defaultAvatarUrl"/>
              </el-upload>

              <div class="info-img-input" v-if="isEditing">
                <el-input class="name-inputer" v-model="form.name"></el-input>
                <el-select class="gender-inputer" v-model="form.gender">
                  <el-option v-for="item in genderOptions" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue"></el-option>
                </el-select>
              </div>
              <div class="info-img-label" v-if="!isEditing">
                <div class="info-name">{{form.name}}</div><span class="info-gender" :class="form.gender==1?'male':'female'" v-if="form.gender&&form.gender!=0"></span>
              </div>
            </div>
            <div class="info-middle">
              <el-form-item label="出生年月：">
                <el-date-picker v-model="form.birthday" type="month" v-if="isEditing"></el-date-picker>
                <div class="form-item-value" v-if="!isEditing">{{form.birthday}}</div>
              </el-form-item>
              <el-form-item label="政治面貌：">
                <el-input v-model="form.politicalLandscape" v-if="isEditing"></el-input>
                <div class="form-item-value" v-if="!isEditing">{{form.politicalLandscape}}</div>
              </el-form-item>
              <el-form-item label="入党时间：">
                <el-date-picker v-model="form.partyTime" type="date" v-if="isEditing"></el-date-picker>
                <div class="form-item-value" v-if="!isEditing">{{form.partyTime}}</div>
              </el-form-item>
              <el-form-item label="婚姻状况：">
                <!--<el-input v-model="form.stStudentNumber"></el-input>-->
              </el-form-item>
              <el-form-item label="户籍：">
                <el-input v-model="form.nativePlace" v-if="isEditing"></el-input>
                <div class="form-item-value" v-if="!isEditing">{{form.nativePlace}}</div>
              </el-form-item>
              <el-form-item label="民族：">
                <el-input v-model="form.nation" v-if="isEditing"></el-input>
                <div class="form-item-value" v-if="!isEditing">{{form.nation}}</div>
              </el-form-item>
              <el-form-item label="身份证号：">
                <el-input v-model="form.idCard" v-if="isEditing"></el-input>
                <div class="form-item-value" v-if="!isEditing">{{form.idCard}}</div>
              </el-form-item>
              <el-form-item label="最高学历：">
                <el-input v-model="form.nowDegree" v-if="isEditing"></el-input>
                <div class="form-item-value" v-if="!isEditing">{{form.nowDegree}}</div>
              </el-form-item>
              <el-form-item label="家庭地址：">
                <el-input type="textarea" v-model="form.detailedAddress" autosize resize="vertical" v-if="isEditing"></el-input>
                <div class="form-item-value" v-if="!isEditing">{{form.detailedAddress}}</div>
              </el-form-item>
            </div>
            <div class="info-right">
              <el-form-item label="第一学历：">
                <el-input v-model="form.firstDegree" v-if="isEditing"></el-input>
                <div class="form-item-value" v-if="!isEditing">{{form.firstDegree}}</div>
              </el-form-item>
              <el-form-item label="第一学历专业：">
                <el-input v-model="form.firstProfessional" v-if="isEditing"></el-input>
                <div class="form-item-value" v-if="!isEditing">{{form.firstProfessional}}</div>
              </el-form-item>
              <el-form-item label="第一学历毕业院校：">
                <el-input v-model="form.firstSchooling" v-if="isEditing"></el-input>
                <div class="form-item-value" v-if="!isEditing">{{form.firstSchooling}}</div>
              </el-form-item>
              <el-form-item label="第一学历毕业时间：">
                <el-date-picker v-model="form.graduationTime" type="date" v-if="isEditing"></el-date-picker>
                <div class="form-item-value" v-if="!isEditing">{{form.graduationTime}}</div>
              </el-form-item>
              <el-form-item label="参加工作时间：">
                <el-date-picker v-model="form.workingTime" type="date" v-if="isEditing"></el-date-picker>
                <div class="form-item-value" v-if="!isEditing">{{form.workingTime}}</div>
              </el-form-item>
              <el-form-item label="专业技术职务：">
                <el-input v-model="form.professionalPosition" v-if="isEditing"></el-input>
                <div class="form-item-value" v-if="!isEditing">{{form.professionalPosition}}</div>
              </el-form-item>
              <el-form-item label="评审时间：">
                <el-date-picker v-model="form.inspectionTime" type="date" v-if="isEditing"></el-date-picker>
                <div class="form-item-value" v-if="!isEditing">{{form.inspectionTime}}</div>
              </el-form-item>
              <el-form-item label="教师资格证种类：">
                <el-input v-model="form.teacherQualificationType" v-if="isEditing"></el-input>
                <div class="form-item-value" v-if="!isEditing">{{form.teacherQualificationType}}</div>
              </el-form-item>
              <el-form-item label="普通话等级：">
                <el-input v-model="form.mandarinLevel" v-if="isEditing"></el-input>
                <div class="form-item-value" v-if="!isEditing">{{form.mandarinLevel}}</div>
              </el-form-item>
              <el-form-item label="岗位等级：">
                <el-input v-model="form.postLevel" v-if="isEditing"></el-input>
                <div class="form-item-value" v-if="!isEditing">{{form.postLevel}}</div>
              </el-form-item>
            </div>
          </div>
        </el-form>
      </el-card>

      <el-card class="box-card relation-info-card">
        <div class="header" slot="header">
          <div class="header-text"><span class="header-icon header-icon-relation"></span>家庭关系</div>
          <el-button class="edit-btn" type="text" @click="addRelation" v-if="isEditing"><i class="el-icon-plus"></i> 增加</el-button>
        </div>
        <div class="data-table">
          <el-row class="data-table-row data-table-header">
            <el-col class="data-table-col" :span="6">姓名</el-col>
            <el-col class="data-table-col" :span="isEditing?5:6">关系</el-col>
            <el-col class="data-table-col" :span="6">电话</el-col>
            <el-col class="data-table-col" :span="6">工作单位及职务</el-col>
            <el-col class="data-table-col" :span="1" v-if="isEditing"></el-col>
          </el-row>
          <el-row class="data-table-row data-table-item" v-for="(item, index) in form.nssArchivesFamilys" type="flex" align="middle">
            <el-col class="data-table-col" :span="6">
              <el-input v-model="item.fmName" size="mini" v-if="isEditing"></el-input>
              <div class="data-table-col-value" v-if="!isEditing">{{item.fmName}}</div>
            </el-col>
            <el-col class="data-table-col" :span="isEditing?5:6">
              <el-input v-model="item.fmRelation" size="mini" v-if="isEditing"></el-input>
              <div class="data-table-col-value" v-if="!isEditing">{{item.fmRelation}}</div>
            </el-col>
            <el-col class="data-table-col" :span="6">
              <el-input v-model="item.fmPhone" size="mini" v-if="isEditing"></el-input>
              <div class="data-table-col-value" v-if="!isEditing">{{item.fmPhone}}</div>
            </el-col>
            <el-col class="data-table-col" :span="6">
              <el-input v-model="item.fmWork" size="mini" v-if="isEditing"></el-input>
              <div class="data-table-col-value" v-if="!isEditing">{{item.fmWork}}</div>
            </el-col>
            <el-col class="data-table-col" :span="1" v-if="isEditing">
              <el-button class="del-row" type="danger" icon="el-icon-remove" circle size="mini" @click="delRelation(index)"></el-button>
            </el-col>
          </el-row>
        </div>
      </el-card>

      <el-card class="box-card relation-info-card">
        <div class="header" slot="header">
          <div class="header-text"><span class="header-icon header-icon-education"></span>教育背景</div>
          <el-button class="edit-btn" type="text" @click="addEducation" v-if="isEditing"><i class="el-icon-plus"></i> 增加</el-button>
        </div>
        <div class="data-table">
          <el-row class="data-table-row data-table-header">
            <el-col class="data-table-col" :span="6">开始时间</el-col>
            <el-col class="data-table-col" :span="6">结束时间</el-col>
            <el-col class="data-table-col" :span="isEditing?5:6">学校</el-col>
            <el-col class="data-table-col" :span="6">专业</el-col>
            <el-col class="data-table-col" :span="1" v-if="isEditing"></el-col>
          </el-row>
          <el-row class="data-table-row data-table-item" v-for="item in form.nssArchivesEducations" type="flex" align="middle">
            <el-col class="data-table-col" :span="6">
              <el-date-picker
                v-model="item.edStartTime"
                type="date"
                v-if="isEditing"
              >
              </el-date-picker>
              <div class="data-table-col-value" v-if="!isEditing">{{item.edStartTime}}</div>
            </el-col>
            <el-col class="data-table-col" :span="6">
              <el-date-picker
                v-model="item.edEndTime"
                type="date"
                v-if="isEditing"
              >
              </el-date-picker>
              <div class="data-table-col-value" v-if="!isEditing">{{item.edEndTime}}</div>
            </el-col>
            <el-col class="data-table-col" :span="isEditing?5:6">
              <el-input v-model="item.enSchool" v-if="isEditing"></el-input>
              <div class="data-table-col-value" v-if="!isEditing">{{item.enSchool}}</div>
            </el-col>
            <el-col class="data-table-col" :span="6">
              <el-input v-model="item.enProfessional" v-if="isEditing"></el-input>
              <div class="data-table-col-value" v-if="!isEditing">{{item.enProfessional}}</div>
            </el-col>
            <el-col class="data-table-col" :span="1" v-if="isEditing">
              <el-button class="del-row" type="danger" icon="el-icon-remove" circle size="mini" @click="delEducation(index)"></el-button>
            </el-col>
          </el-row>
        </div>
      </el-card>

      <el-card class="box-card relation-info-card">
        <div class="header" slot="header">
          <div class="header-text"><span class="header-icon header-icon-work"></span>工作经历</div>
          <el-button class="edit-btn" type="text" @click="addWork" v-if="isEditing"><i class="el-icon-plus"></i> 增加</el-button>
        </div>
        <div class="data-table">
          <el-row class="data-table-row data-table-header">
            <el-col class="data-table-col" :span="5">开始时间</el-col>
            <el-col class="data-table-col" :span="5">结束时间</el-col>
            <el-col class="data-table-col" :span="5">公司单位</el-col>
            <el-col class="data-table-col" :span="isEditing?4:5">岗位</el-col>
            <el-col class="data-table-col" :span="4">备注</el-col>
            <el-col class="data-table-col" :span="1" v-if="isEditing"></el-col>
          </el-row>
          <el-row class="data-table-row data-table-item" v-for="item in form.nssArchivesJobs" type="flex" align="middle">
            <el-col class="data-table-col" :span="5">
              <el-date-picker
                v-model="item.arStartTime"
                type="date"
                v-if="isEditing"
              >
              </el-date-picker>
              <div class="data-table-col-value" v-if="!isEditing">{{item.arStartTime}}</div>
            </el-col>
            <el-col class="data-table-col" :span="5">
              <el-date-picker
                v-model="item.arEndTime"
                type="date"
                v-if="isEditing"
              >
              </el-date-picker>
              <div class="data-table-col-value" v-if="!isEditing">{{item.arEndTime}}</div>
            </el-col>
            <el-col class="data-table-col" :span="5">
              <el-input v-model="item.arCompany" v-if="isEditing"></el-input>
              <div class="data-table-col-value" v-if="!isEditing">{{item.arCompany}}</div>
            </el-col>
            <el-col class="data-table-col" :span="isEditing?4:5">
              <el-input v-model="item.arPost" v-if="isEditing"></el-input>
              <div class="data-table-col-value" v-if="!isEditing">{{item.arPost}}</div>
            </el-col>
            <el-col class="data-table-col" :span="4">
              <el-input v-model="item.arRemark" v-if="isEditing"></el-input>
              <div class="data-table-col-value" v-if="!isEditing">{{item.arRemark}}</div>
            </el-col>
            <el-col class="data-table-col" :span="1" v-if="isEditing">
              <el-button class="del-row" type="danger" icon="el-icon-remove" circle size="mini" @click="delWork(index)"></el-button>
            </el-col>
          </el-row>
        </div>
      </el-card>

      <el-card class="box-card relation-info-card">
        <div class="header" slot="header">
          <div class="header-text"><span class="header-icon header-icon-prize"></span>奖惩情况</div>
          <el-button class="edit-btn" type="text" @click="addReward" v-if="isEditing"><i class="el-icon-plus"></i> 增加</el-button>
        </div>
        <div class="data-table">
          <el-row class="data-table-row data-table-header">
            <el-col class="data-table-col" :span="isEditing?5:6">获取时间</el-col>
            <el-col class="data-table-col" :span="6">奖惩类型</el-col>
            <el-col class="data-table-col" :span="6">奖惩归类</el-col>
            <el-col class="data-table-col" :span="6">奖惩内容</el-col>
            <el-col class="data-table-col" :span="1" v-if="isEditing"></el-col>
          </el-row>
          <el-row class="data-table-row data-table-item" v-for="(item, index) in form.nssArchivesRewardss" type="flex" align="middle">
            <el-col class="data-table-col" :span="isEditing?5:6">
              <el-date-picker
                v-model="item.rwTime"
                type="date"
                size="mini"
                v-if="isEditing">
              </el-date-picker>
              <div class="data-table-col-value" v-if="!isEditing">{{item.rwTime}}</div>
            </el-col>
            <el-col class="data-table-col" :span="6">
              <el-input v-model="item.rwType" size="mini" v-if="isEditing"></el-input>
              <div class="data-table-col-value" v-if="!isEditing">{{item.rwType}}</div>
            </el-col>
            <el-col class="data-table-col" :span="6">
              <el-input v-model="item.rwClassify" size="mini" v-if="isEditing"></el-input>
              <div class="data-table-col-value" v-if="!isEditing">{{item.rwClassify}}</div>
            </el-col>
            <el-col class="data-table-col" :span="6">
              <el-input v-model="item.rwContent" size="mini" v-if="isEditing"></el-input>
              <div class="data-table-col-value" v-if="!isEditing">{{item.rwContent}}</div>
            </el-col>
            <el-col class="data-table-col" :span="1" v-if="isEditing">
              <el-button class="del-row" type="danger" icon="el-icon-remove" circle size="mini" @click="delReward(index)"></el-button>
            </el-col>
          </el-row>
        </div>
      </el-card>

      <el-card class="box-card relation-info-card">
        <div class="header" slot="header">
          <div class="header-text"><span class="header-icon header-icon-certificate"></span>职业证书</div>
          <el-button class="edit-btn" type="text" @click="addCertificate" v-if="isEditing"><i class="el-icon-plus"></i> 增加</el-button>
        </div>
        <div class="data-table">
          <el-row class="data-table-row data-table-header">
            <el-col class="data-table-col" :span="6">获取时间</el-col>
            <el-col class="data-table-col" :span="isEditing?17:18">名称</el-col>
            <el-col class="data-table-col" :span="1" v-if="isEditing"></el-col>
          </el-row>
          <el-row class="data-table-row data-table-item" v-for="item in form.nssArchivesCertificates" type="flex" align="middle">
            <el-col class="data-table-col" :span="6">
              <el-date-picker
                v-model="item.ceTime"
                type="date"
                v-if="isEditing">
              </el-date-picker>
              <div class="data-table-col-value" v-if="!isEditing">{{item.ceTime}}</div>
            </el-col>
            <el-col class="data-table-col" :span="isEditing?17:18">
              <el-input v-model="item.ceName" v-if="isEditing"></el-input>
              <div class="data-table-col-value" v-if="!isEditing">{{item.ceName}}</div>
            </el-col>
            <el-col class="data-table-col" :span="1" v-if="isEditing">
              <el-button class="del-row" type="danger" icon="el-icon-remove" circle size="mini" @click="delCertificate(index)"></el-button>
            </el-col>
          </el-row>
        </div>
      </el-card>

      <el-card class="box-card relation-info-card" >
        <div class="header" slot="header">
          <div class="header-text"><span class="header-icon header-icon-attach"></span>附件</div>
        </div>
        <div class="pic-list">
          <el-upload :class="!isEditing?'not-editing':''" :action="attachAction" :headers="uploadHeaders" list-type="picture-card" :file-list="attachList" :on-success="handleUploadAttach" :before-remove="handleBeforeRemoveAttach" :on-remove="handleRemoveAttach" :on-preview="handleAttachPreview" :disabled="!isEditing">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="isShowPreviewImg">
            <img width="100%" :src="previewImgUrl" alt="">
          </el-dialog>
        </div>
      </el-card>

      <div class="btn-bar" v-if="isEditing">
        <el-button type="primary" @click="handleSubmit">保存</el-button>
        <el-button type="warning" @click="handleCancel">取消</el-button>
      </div>
    </div>
</template>

<script>
    import { getId } from "@/api/common"
    import { addFile, delFiles, getFileList } from "@/api/basic/file"
    import {addUserArchives, editUserArchives, getUserArchivesList } from "@/api/system/userArchives"

    export default {
      name: "index",
      data(){
        return {
          defaultAvatarUrl:require('@/assets/image/studentArchives/default-avatar.jpg'),
          addFlag:true,
          isEditing:false,
          isAvatarChange:false,
          isShowPreviewImg:false,
          previewImgUrl:"",
          genderOptions:[],
          isActiveOptions:[],
          avatarAction:"",
          attachAction:"",
          uploadHeaders: {
            Authorization: 'Bearer ' + this.$store.state.user.token,
            lesseeId: this.$store.state.user.lesseeid
          },
          attachList:[],
          form:{
            birthday:"",
            detailedAddress:"",
            firstDegree:"",
            firstProfessional:"",
            firstSchooling:"",
            gender:"",
            graduationTime:"",
            idCard:"",
            inspectionTime:"",
            mandarinLevel:"",
            name:"",
            nation:"",
            nativePlace:"",
            nowDegree:"",
            nssArchivesCertificates:[],
            nssArchivesEducations:[],
            nssArchivesFamilys:[],
            nssArchivesJobs:[],
            nssArchivesRewardss:[],
            partyTime:"",
            phone:"",
            politicalLandscape:"",
            postLevel:"",
            professionalPosition:"",
            teacherQualificationType:"",
            userCode:"",
            userAvatar:"",
            workingTime:""
          }
        }
      },
      methods:{
        getUserArchives(code, call){
          let that = this
          getUserArchivesList({userCode:code}).then(response => {
            if(response.data.length>0){
              that.form = response.data[0]
            }else{
              that.form.nssArchivesCertificates = []
              that.form.nssArchivesEducations = []
              that.form.nssArchivesFamilys = []
              that.form.nssArchivesJobs = []
              that.form.nssArchivesRewardss = []
            }
            if(call){
              call()
            }
          })
        },
        addUserArchives(data,call){
          let that = this
          addUserArchives(data).then(response => {
            if (response.code === 200) {
              that.msgSuccess("提交成功");
              if(call){
                call()
              }
            }else{
              that.msgError(response.msg)
            }
          })
        },
        editUserArchives(data,call){
          let that = this
          editUserArchives(data).then(response => {
            if (response.code === 200) {
              that.msgSuccess("提交成功");
              if(call){
                call()
              }
            }else{
              that.msgError(response.msg)
            }
          })
        },
        addFile(data,call){
          let that = this
          addFile(data).then(response => {
            if (response.code !== 200) {
              that.msgError(response.msg)
            }else{
              if(call){
                call()
              }
            }
          })
        },
        delFiles(ids,call){
          let that = this
          delFiles({ids}).then(response => {
            if (response.code !== 200) {
              that.msgError(response.msg)
            }else{
              if(call){
                call()
              }
            }
          })
        },
        getFileList(id,sourcessType,sourcessType2){
          let that = this
          let params = {sourcessId:id,sourcessType,sourcessType2}
          getFileList(params).then(response => {
            if (response.code === 200) {
              that.attachList = response.rows
              for(let i of that.attachList){
                i.url = i.fileUrl
              }
            }
          })
        },
        createId(call){
          getId().then(response => {
            this.form.id = response.data.id
            if(call){
              call()
            }
          })
        },
        setUploadActions(id){
          this.avatarAction = process.env.VUE_APP_BASE_API+"/common/upload/news?sourceId="+id
          this.attachAction = process.env.VUE_APP_BASE_API+"/common/upload/news?sourceId="+id
        },
        handleUploadAvatar(response, file, fileList){
          this.form.userAvatar = response.url
          this.isAvatarChange = true
        },
        handleAttachPreview(file){
          this.isShowPreviewImg=true
          this.previewImgUrl=file.url
        },
        handleUploadAttach(response, file, fileList){
          /*let data = {
            id:"",
            sourcessId:this.form.id,
            sourcessType:"USER_ARCHIVES",
            sourcessType2:"ATTACH",
            fileUrl:response.url
          }
          this.addFile(data,() => {
            this.attachList.push(file)
          })*/
          this.attachList.push(file)
        },
        handleBeforeRemoveAttach(file, fileList){
          return this.$confirm('确定删除该图片?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            if(file.id){
              this.delFiles(file.id,() => {
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                })
              })
            }else{
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
            }
          });
        },
        handleRemoveAttach(file, fileList){
          this.getFileList(that.form.id,"USER_ARCHIVES","ATTACH")
        },
        handleSubmit(){
          let that = this
          let call = function(){
            that.isEditing = false
            /*if(that.isAvatarChange){
              that.isEditing = false
              let data = {
                id:"",
                sourcessId:that.form.id,
                sourcessType:"USER_ARCHIVES",
                sourcessType2:"AVATAR",
                fileUrl:that.form.userAvatar
              }
              that.addFile(data,function(){
                that.isAvatarChange = false
              })
            }*/
          }
          if(that.addFlag){
            that.addUserArchives(that.form, call())
          }else{
            that.editUserArchives(that.form, call())
          }
        },
        handleCancel(){
          this.isEditing = false
          this.getUserArchives()
        },
        handleEditing(){
          this.isEditing = true
        },

        addRelation(){
          this.form.nssArchivesFamilys.push({
            fmName:"",
            fmPhone:"",
            fmRelation:"",
            fmWork:""
          })
        },
        delRelation(index){
          this.form.nssArchivesFamilys.splice(index,1)
        },
        addReward(){
          this.form.nssArchivesRewardss.push({
            rwClassify:"",
            rwContent:"",
            rwTime:"",
            rwType:""
          })
        },
        delReward(index){
          this.form.nssArchivesRewardss.splice(index,1)
        },
        addEducation(){
          this.form.nssArchivesEducations.push({
            edEndTime:"",
            edStartTime:"",
            enProfessional:"",
            enSchool:""
          })
        },
        delEducation(index){
          this.form.nssArchivesEducations.splice(index,1)
        },
        addWork(){
          this.form.nssArchivesJobs.push({
            arCompany:"",
            arEndTime:"",
            arPost:"",
            arRemark:"",
            arStartTime:""
          })
        },
        delWork(index){
          this.form.nssArchivesJobs.splice(index,1)
        },
        addCertificate(){
          this.form.nssArchivesCertificates.push({
            ceName:"",
            ceTime:""
          })
        },
        delCertificate(index){
          this.form.nssArchivesCertificates.splice(index,1)
        },
      },
      created() {
        let that = this
        let code = this.$route.params.code

        if(code){
          that.form.userCode = code
          that.getUserArchives(code,function(){
            if(that.form.id){
              that.addFlag = false
              that.getFileList(that.form.id,"USER_ARCHIVES","ATTACH")
              that.setUploadActions(that.form.id)
            }else{
              that.addFlag = true
              that.isEditing = true
              that.createId(function(){
                that.getFileList(that.form.id,"USER_ARCHIVES","ATTACH")
                that.setUploadActions(that.form.id)
              })
            }
          })
        }

        this.getDicts("is_active").then(response => {
          this.isActiveOptions = response.data
        })
        this.getDicts("sys_user_sex").then(response => {
          this.genderOptions = response.data
        })


      }
    }
</script>

<style>
  .box-card{
    margin-bottom: 15px;
  }
  .header{
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .header .header-text{
    display: flex;
    align-items: center;
    justify-content: space-between;

    font-family: MicrosoftYaHeiUI-Bold;
    font-size: 14px;
    font-weight: bold;
    font-stretch: normal;
    letter-spacing: 0px;
    color: #333333;
  }
  .header .header-icon{
    display: inline-block;
    width: 18px;
    height: 18px;
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
    margin-right: 6px;
  }
  .header .header-icon.header-icon-profile{
    background-image: url("../../../../assets/image/studentArchives/icon_01.png");
  }
  .header .header-icon.header-icon-relation{
    background-image: url("../../../../assets/image/studentArchives/icon_02.png");
  }
  .header .header-icon.header-icon-prize{
    background-image: url("../../../../assets/image/studentArchives/icon_05.png");
  }
  .header .header-icon.header-icon-attach{
    background-image: url("../../../../assets/image/studentArchives/icon_07.png");
  }
  .header .header-icon.header-icon-education{
    background-image: url("../../../../assets/image/studentArchives/icon_03.png");
  }
  .header .header-icon.header-icon-work{
    background-image: url("../../../../assets/image/studentArchives/icon_04.png");
  }
  .header .header-icon.header-icon-certificate{
    background-image: url("../../../../assets/image/studentArchives/icon_06.png");
  }
  .header .edit-btn{
    font-family: MicrosoftYaHeiUI;
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 0px;
    color: #1890ff;
  }
  .base-info{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
  }
  .info-left{
    flex: 0 0 210px;
    margin: 0 30px;
    text-align: center;
  }
  .info-middle{
    flex: 0.5;
    text-align: left;
    margin-right: 50px;
  }
  .info-right{
    flex: 0.5;
    text-align: left;
  }
  .info-img{
    border-radius: 10px;
    margin-bottom: 10px;
    position: relative;
  }
  .info-img .info-img-show{
    width: 210px;
    height: 280px;
    border-radius: 10px;
    object-fit: contain;
  }
  .info-img-input{
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .info-img-input .name-inputer{
    width: 50%;
    flex: 1;
  }
  .info-img-input .gender-inputer{
    width: 50%;
    flex: 0 0 auto;
  }
  .info-img-label{
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .info-img-label .info-name{
    font-family: MicrosoftYaHei-Bold;
    font-size: 16px;
    font-weight: bold;
    font-stretch: normal;
    letter-spacing: 0px;
    color: #333333;
  }
  .info-img-label .info-gender{
    display: inline-block;
    width: 18px;
    height: 18px;
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
    margin-left: 6px;
  }
  .info-img-label .info-gender.male{
    background-image: url("../../../../assets/image/studentArchives/icon_sex_boy.png");
  }
  .info-img-label .info-gender.female{
    background-image: url("../../../../assets/image/studentArchives/icon_sex_girl.png");
  }
  .base-info-form .el-form-item__label{
    font-family: MicrosoftYaHei;
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 0px;
    color: #888888;
  }
  .base-info-form .el-input__inner, .base-info-form .el-textarea__inner, .base-info-form .form-item-value{
    font-family: MicrosoftYaHei;
    font-size: 14px;
    color: #333333;
  }

  .data-table .data-table-row{
    padding: 0;
    text-align: center;
  }
  .data-table .data-table-row .data-table-col{
    font-family: MicrosoftYaHei;
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 0px;
    color: #333333;
    padding: 15px 0 0 0;
    text-align: center;
  }
  .data-table .data-table-row .data-table-col .el-input{
    padding: 0 5px;
    width: 100%;
  }
  .data-table .data-table-row .data-table-col .el-input__inner{
    text-align: center;
    font-family: MicrosoftYaHei;
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 0px;
    color: #333333;
  }
  .data-table .data-table-row .data-table-col .data-table-col-value{
    font-family: MicrosoftYaHei;
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 0px;
    color: #333333;
  }
  .data-table .data-table-row.data-table-header{
    background-color: #f5f5f5;
  }
  .data-table .data-table-row.data-table-header .data-table-col{
    font-family: MicrosoftYaHei-Bold;
    font-weight: bold;
    padding: 15px 0 15px 0;
  }
  .btn-bar{
    text-align: center;
  }

  .not-editing .el-upload.el-upload--picture-card{
    display: none;
  }
</style>
